<template>
  <el-card>
    <div slot="header">
      <h3>{{ pageTitle }}</h3>
    </div>
    <div v-if="isEdit" class="btn-header">
      <el-divider content-position="right">
        <el-button type="text" @click="handleGoBack">返回</el-button>
        <template v-if="isFromSourcing">
          <el-button
            type="text"
            :loading="btnLoading.submit"
            @click="handleSave"
          >保存</el-button>
        </template>
        <template v-else>
          <el-button
            type="text"
            :loading="btnLoading.submit"
            @click="handleSubmit"
          >提交</el-button>
        </template>
      </el-divider>
    </div>
    <ImageText
      ref="imageRef"
      v-loading="pageLoading"
      :data-source="dataSource"
      :rules="requireRules"
      :read-only="!isEdit"
    />
  </el-card>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import ImageText from '@/pages/commodity/temporaryManage/components/ImageText';
import { PRODUCT_TYPES_ENUMS } from '@/constants/commodity';
import { COMMIT_TYPES_ENUMS } from '@/pages/commodity/temporaryManage/components/ImageText/constants';
import { isResponseSuccess } from '@/utils/bizUtils';
import {
  queryImageInfoService,
  saveOrSubmitImageInfoService
} from '@/api/public';
export default {
  components: {
    BasicDialog,
    ImageText
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imageInfo: {
      type: Object,
      default: () => ({})
    },
  },
  data () {
    return {
      dataSource: {},
      pageLoading: false,
      requireRules: {
        mainImageTrimming: { required: true, message: '商品主图片（精修）不能为空' },
        multiImageTrimming: { required: true, message: '商品多角度图（精修）不能为空' }
      },
      btnLoading: {
        submit: false
      }
    }
  },
  created () {
    this.setHistoryImageInfo()
  },
  computed: {
    pageTitle () {
      if (this.$route?.query?.type == 'view') return '潜在图文查看'
      if (this.$route?.query?.type == 'edit') return '潜在图文编辑'
      return ''
    },
    isEdit () {
      return this.$route?.query?.type == 'edit'
    },
    // 来自寻源
    isFromSourcing () {
      return this.$route?.query.isFromSourcing
    }
  },
  methods: {
    // 提交
    async handleSubmit () {
      this.$refs.imageRef.validateImgTextInfo(() => {
        this.submitImageInfo(COMMIT_TYPES_ENUMS.Submit)
      })
    },
    // 保存
    handleSave () {
      this.submitImageInfo(COMMIT_TYPES_ENUMS.Save)
    },
    // 返回
    handleGoBack () {
      this.$router.push({ name: 'latentProductList' })
    },
    // 获取历史图片信息
    async setHistoryImageInfo () {
      const data = {
        skuId: this.$route?.query?.skuId,
        skuNo: this.$route?.query?.skuNo
      }
      const loadingFn = state => { this.pageLoading = state }
      const res = await queryImageInfoService(data, loadingFn)
      this.dataSource = res?.retData ?? {}
    },
    // 提交图文信息
    async submitImageInfo (saveOrSubmit) {
      const data = {
        skuId: this.$route?.query?.skuId,
        skuNo: this.$route?.query?.skuNo,
        saveOrSubmit,
        productType: PRODUCT_TYPES_ENUMS.POTENTIAL,
        ...(this.$refs?.imageRef.getImageInfo() ?? {})
      }
      const loadingFn = state => { this.btnLoading.submit = state }
      const res = await saveOrSubmitImageInfoService(data, loadingFn)
      if (isResponseSuccess(res)) {
        this.$confirm('操作成功，确认关闭当前页面吗？', '提示', {
          type: 'success',
        }).then(() => {
          window.close()
        }).catch(() => {})
      }
    }
  }
}
</script>
